<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
	  /* 定义  主题 */
    	.amap-ui-control-theme-my-set{ background:#fff;}
    </style>
    <title>地图类型切换</title>
  </head>
  <body>
  	<!--地图-->
  	<div style="position:relative;width:100%;height:70%;">
    	<div id="container" tabindex="0" style="width:100%;height:70%;""></div>
    </div>
    <div>
    	<button id="t1">类型1</button>
        <button id="t2">类型2</button>
        <button id="t3">类型3</button>
        <button id="t4">类型4</button>
        <button id="t5">类型5</button>
        <button id="t6">类型6</button>
    </div>
    <!--操作-->
	<script type="text/javascript" src="zepto.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=9a621a769237615e36fe158651cc8e1f"></script>
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>
    <script type="text/javascript">
	    var defaultLayer = new AMap.TileLayer();//默认样式的图层，不使用layers属性的时候无需设置
		var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
		var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
		var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
		var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
	    //创建地图
		var map = new AMap.Map('container');
		map.setZoom(10);
		map.setCenter([116.39,39.9]);
		defaultLayer.setMap(map);
		AMap.event.addListener(map,'zoomend',function(){
			console.log("当前缩放级别："+map.getZoom());
		});
		//ui
		
		
		$("#t1").click(function(){
			
			roadNetLayer.setMap(map); 
    		
		})
		$("#t2").click(function(){
			roadNetLayer.setMap(null);
		})
		$("#t3").click(function(){
			satellLayer.setMap(map);
		})
		$("#t4").click(function(){
			satellLayer.setMap(null);
		})
		$("#t5").click(function(){
			buildingLayer.setMap(map);
			map.setZoom(17);
		})
		$("#t6").click(function(){
			buildingLayer.setMap(null);
		})
			
	
    </script>
  </body>
</html>
